<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin: 0;padding: 0}
		.box{width: 400px;
			height: 600px;margin: 100px auto;display: none}
		.box1{background: #f03df2}
	</style>
</head>
<body>

	<h2>上传方式一，借助form上传文件</h2>


	<form action="http://localhost:3000/file/fileUpload" method="post" enctype="multipart/form-data">
	    <input type="file" name="file" id="file" value="" multiple="multiple" />
	    <input type="submit" value="提交"/>
	</form>


	<h2>上传方式二，借助form，利用ajax进行文件上传</h2>


	<form id="uploadForm" enctype="multipart/form-data">
	    <input type="file" name="file" multiple>
	    <input type="button" value="Upload" id="upload" />
	</form>

	<h2>上传方式三，利用ajax进行文件上传</h2>


	
	<input type="file" name="file" id="file3" multiple />
	<button type="button" id="upload3">上传</button>

</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
	$(function () {
		

        $('#upload').click(function() {
        	var form = new FormData($('#uploadForm')[0])
            $.ajax({
                url: "http://localhost:3000/file/fileUpload",
                type: "post",
                data: form,
                cache: false,
                processData:false,
                contentType:false,
                success: function(res) {
                    console.log(res)
                },
                error: function(err) {
                    console.log(err)
                }
            })
        })

        $("#upload3").click(function() {
        	var files = $("#file3")[0].files;
        	var formData = new FormData();
        	for(var i = 0; i< files.length; i++) {
        		formData.append("file", files[i]);
        	}
        	$.ajax({
        		url: "http://localhost:3000/file/fileUpload",
        		type: "post",
        		data: formData,
        		cache: false,
                processData:false,
                contentType:false,
                success: function(res) {
                    console.log(res)
                },
                error: function(err) {
                    console.log(err)    
                }
        	})
        })
    })
</script>